<template>
	<view>
		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#333" size="50"></u-icon>
			<text>绑定设备</text>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="bind-info">
				<view class="title">
					当前设备使用情况：
				</view>
				<view class="list">
					<image src="../../../../static/images/user-muti.png" class="icon" mode=""></image>
					<view class="info">
						总用人数：3人
					</view>
				</view>
				<view class="list">
					<image src="../../../../static/images/user-success.png" class="icon" mode=""></image>
					<view class="info">
						已用人数：1人
					</view>
				</view>
				<view class="list">
					<image src="../../../../static/images/user.png" class="icon" mode=""></image>
					<view class="info">
						可用人数：2人
					</view>
				</view>
			</view>
			<view class="admin-info" >
				<view class="admin">
					<view class="title">
						管理员
					</view>
					<view class="phone" >
						139xxxx2033
					</view>
				</view>
				<view class="code">
					<view class="title">
						验证码
					</view>
					<view class="code-timer">
						<view class="code-input" style="width:200px;">
							<input type="text" placeholder="输入验证码" :value="codeValue" />
						</view>
						<view class="timer">
							发送 60S
						</view>
					</view>
					<view class="" style='font-size:13px;margin-top:15px;color:#999'>
						请通过管理员手机验证码确定管理员
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeValue:'',
				code: '',
				deviceInfo:''
			}
		},
		mounted() {
			this.getInviteList()
		},
		onLoad(query) {

			const scene = decodeURIComponent(query.scene);
			//类型为string，所以只能判断不叫"undefined"
			//console.log(typeof(scene));
			if (scene != "undefined" && scene.length > 4) {
				console.log(scene);
				uni.showModal({
					content: '证书编码:' + scene + '，点击查询查看详情',
					showCancel: false
				});
				this.code = scene;
				bindDevice();
			} else {
				console.log("没有启动参数");

			}
		},
		methods: {
			async getInviteList() {
				let res = await this.$api.inviteList()
				let list = []
				if (res.code === 200) {
					list = res.result.list
					if (list.length) {
						list.forEach(ele => {
							if (ele.deviceCode) {
								this.code = ele.deviceCode
								this.deviceInfo = ele
							}
						})
					}

				}
			},
			navigateBack() {
				// wx.reLaunch({
				// 	url: '../login'
				// })
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prevPage = pages[pages.length - 2]
				
				uni.navigateBack({
					delta:prevPage
				})
			},
			guide() {
				wx.reLaunch({
					url: './bindingGuide'
				})
			},
			invitation() {
				// wx.reLaunch({
				// 	url: './invitation'
				// })
				if (this.code) {
					uni.navigateTo({
						url: '/pages/login/binding/device/device?code=' + this.code
					})
				} else {
					uni.showToast({
						title: '暂无人邀请过你！'
					})
				}
			},
			scanCode() {
				var _this = this;
				uni.scanCode({
					success: function(res) {
						_this.code = res.result;
						_this.bindDevice();
					},
					fail: function(res) {

						uni.showModal({
							title: '设备扫码',
							content: res.message || '设备扫描失败'
						});
					}
				})
			},
			async bindDevice() {

				uni.navigateTo({
					url: '/pages/login/binding/device/device?code=' + this.code
				})
				// 	let tpl_param = {
				// 		code: this.code
				// 	};
				// 	uni.showLoading({
				// 		title: '加载中',
				// 		mask: true
				// 	});
				// 	let res = await this.$api.bindDevice(tpl_param);
				// 	if (res.code == 200) {
				// 		uni.showToast({
				// 			title: '设备绑定成功'
				// 		});
				// 		setTimeout(() => {
				// 			uni.reLaunch({
				// 				url:'/pages/index/index'
				// 			})
				// 		}, 1000)
				// 	} else {
				// 		uni.showToast({
				// 			icon: 'error',
				// 			title: res.message || '设备绑定失败'
				// 		});
				// 	}
				// 	uni.hideLoading();
			}
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar {
		margin-top: 90rpx;
		margin-bottom: 80rpx;
		width: 750rpx;
	}

	.navbar>text {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 220rpx;
	}

	.icon-left {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	// 内容
	.content{
		width: 100%;
		padding: 20rpx 16rpx;
		box-sizing: border-box;
		.bind-info{
			width:100%;
			height: 400rpx;
			border-radius: 8rpx;
			background: #f1f1f1;
			padding:26rpx 32rpx;
			box-sizing: border-box;
			.title{
				color:#999;
			}
			.list{
				display: flex;
				margin-top:24rpx;
				.icon{
					width:46rpx;
					height:46rpx;
				}
				.info{
					color:#999;
					font-size:14px;
					margin-top:8rpx;
					margin-left:8rpx;
				}
			}
		}
		.admin-info{
			width:100%;
			margin-top:24rpx;
			height: 410rpx;
			border-radius: 8rpx;
			background: #f1f1f1;
			padding:26rpx 32rpx;
			box-sizing: border-box;
			.admin{
				.title{
					color:#000;
					margin-top:6px;
				}
				.phone{
					margin-top:6px;
					width:600rpx;
					border:1px solid #f1f1f1;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					padding:15rpx;
					box-sizing: border-box;
					background-color: #abcdff;
					color:#999;
					font-size:15px;
				}
			}
			.code{
				margin-top:12px;
				.title{
					color:#000;
					margin-top:6px;
				}
				.code-timer{
					margin-top:6px;
					display: flex;
					border-radius: 5px;
					border:1px solid #999;
					background-color: #fff;
					width:600rpx;
					height:40px;
					align-items: center;
					padding-left:12px;
					box-sizing: border-box;
					.timer{
						width:88px;
						display: flex;
						align-items: center;
						padding: 0 12px;
						box-sizing: border-box;
						font-size: 14px;
						color:#999;
						border-left:1px solid #999;
					}
				}
			}
		}
	}
</style>
